<template>
  <div class="swiperWrap">
    <div class="__arrow arrow_l" :class="prevEl" v-if="list.length > slidesPerView"></div>
    <div class="swiper-container" :class="swiperContainer">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in list" :key="i" @click="slideClick(item, i)">
          <slot :scope="item" :index="i"></slot>
        </div>
      </div>
    </div>
    <div class="__arrow arrow_r" :class="nextEl" v-if="list.length > slidesPerView"></div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/css/swiper.css'
  export default {
    name: 'swiperSlide',
    components: {},
    props: {
      list: {
        type: Array,
        default: []
      },
      swiperContainer: {
        type: String,
        default: 'swiper'
      },
      prevEl: {
        type: String,
        default: 'prevEl'
      },
      nextEl: {
        type: String,
        default: 'nextEl'
      },
      slidesPerView: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {}
    },
    mounted() {
    },
    methods: {
      slideClick(item, index){
         this.$emit('on-click', {item, index})
      },
      initSwiper() {
        new Swiper(`.${this.swiperContainer}`, {
          slidesPerView: this.slidesPerView, // 解决最后一张切换到第一张中间的空白
          spaceBetween: 0,
          centeredSlides: false, // 设置slide居中
          navigation: {
            nextEl: `.${this.nextEl}`,
            prevEl: `.${this.prevEl}`
          }, // 自定义分页器
          autoplay: false,
          loop: false, // 开启循环  bug 循环部分点击无效
          speed: 800, // 切换速度
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .swiperWrap {
    display: flex;
    .swiper-container { width: 100%; }
    .__arrow {
      min-width: 32px; width: 32px; height: 32px; cursor: pointer;
      background: url('~@/assets/img/arrow.png');
      &.arrow_l { transform: rotate(180deg); }
      &.swiper-button-disabled { cursor: not-allowed;}
    }
    .text {
      height: 30px; display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: rgba(255,255,255,.6); font-family: PingFangSC;
      transition: all .3s; cursor: pointer;
      &.cur {
        border: 1px solid #3B9DF7; background: rgba(0,43,144,0.4); border-radius: 4px; color: #3B9DF7;
      }
    }
  }
</style>
